<!DOCTYPE html> 
<html class="no-js" lang="en">

<!--============== o(0)o ===============-->
<!--====================================-->
<!--======= SOLI - DEO - GLORIA ========-->
<!--DESIGNED and CODED by TIMOTHY DIOKNO-->
<!--== Handcrafted in Quezon City, PH ==-->
<!--============ March 2013 ============-->
<!--====================================-->
<!--============== o(0)o ===============-->

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{Title}</title>

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<meta name="keywords" content="Timothy Diokno, portfolio, Philippines, graphic designer" />
<meta name="description" content="{MetaDescription}" />
<meta name="google-site-verification" content="Zb_RIF_FVwnCKATaDEruaaAqfcY3ehkCKHiHNrLPNq0" />

<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>

<!--GOOGLE WEB FONTS-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:800,300,400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>


<!--MAIN STYLES-->

<style type="text/css">

* {  
margin: 0;
padding: 0;
   -moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
        box-sizing: border-box;
}

article, aside, details, 
figcaption, figure, footer, 
header, hgroup, nav, section { 
display: block; 
}


html { 
font-size: 100%; 
-webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%;
background-repeat: no-repeat;
background-position: center bottom;
background-attachment: fixed;    
}


body { 
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
font-weight: 400;
padding-bottom: 3em;
padding-top: 3em;    
}

/**********************
LINKS
**********************/

a { 


}

a:hover { 

}


*:hover {
-webkit-transition: all 0.25s ease-in-out ;  /* Saf3.2+, Chrome */
 -moz-transition: all 0.25s ease-in-out;  /* FF4+ */
  -ms-transition: all 0.25s ease-in-out ;  /* IE10 */
   -o-transition: all 0.25s ease-in-out ;  /* Opera 10.5+ */
	  transition: all 0.25s ease-in-out ;
}


/**********************
CHROME FRAME PROMPT 
**********************/

.chromeframe { 
margin: 0.2em 0; 
background: #ccc; 
color: black; 
padding: 0.2em 0; 
}

 
#wrapper {
margin-left: auto;
margin-right: auto;
width: 720px;
zoom: 1;
}

#wrapper:before, #wrapper:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}

#wrapper:after {
clear: both;
}

.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}

/**********************
HEADER
**********************/

#header {
text-transform: uppercase;
position: fixed;
color: #ffffff;
top: 3em;
font-size: .9em;
padding: 1.5em;
z-index: 20;
width: 200px;
text-align: center;
background-color: #2d2a26;
}

#header  a {
text-decoration: none;
color: #ffffff;
opacity: 0.7;
}

#header a:hover {
opacity: 1.0;
}

#header h1 {
display: block;
height: 166px;
width: 140px;
margin: 0 auto;
}


#header h1 a {
height: 100%;
width: 100%;
background-image: url('http://static.tumblr.com/7swizo5/vkfmcjj6r/logooctober2012.png');
background-position: center;
}


/*----*/
/*MENU*/
/*----*/

#main-nav {

}

#main-nav ul {
list-style-type: none;
margin: 1em 0;
clear: both;
}

#main-nav  ul li {


}

#main-nav  ul li:last-child {
margin-right: 0;
}


/**********************
INTRO
**********************/

#intro {
margin: 1em 0;
}

#intro p {
text-transform: uppercase;
font-weight: 300;
font-family: 'Open Sans', sans-serif;;;     
}

#intro em {
font-weight: 800;
font-style: normal;
}
  
#content {
display:inline;
float: left;
position: relative;
margin-left: 5em;
width: 500px;
left:180px;
}


/*-----*/
/*ENTRY*/
/*-----*/

.entry {
letter-spacing: .05em;
margin-bottom: 4em;
font-family: 'PT Sans';
}

.entry a {
color: #303030;
}

.entry-content p {
margin-bottom: 1em;
}

.entry-content iframe {
margin-bottom: 1em;
}

.entry-content ul, .entry-content ol {
margin: 0 0 1em 2em;
}

.entry-header {
margin-bottom: 1em;
font-size: 1.5em;
}

.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 {
line-height: 1em;
margin-bottom: 1em;
text-transform: uppercase;
}

.entry h2 {
margin: 0;
}

.entry-footer {
opacity: 0.7;
font-size: 0.7em;
padding: .8em 0;
margin-top: 2em;
text-transform: uppercase;
}

.entry-footer p span {
display: block;
width: 100%;
}

.icon {
float: left;
display: inline-block;
clear: bottom;
}



/*-----------*/
/*VIDEO POSTS*/
/*-----------*/


/*-----------*/
/*QUOTE POSTS*/
/*-----------*/

.quote-entry .entry-content {
text-align: center;
text-transform: uppercase;
}

.quote-entry blockquote {
font-size: 3em;
line-height: 1em;
font-weight: bold;
margin-bottom: .7em;
}

.quote-entry blockquote:before {
content:' ';
display: block;
width: 100px;
margin: 0 auto .5em auto ;
height: 3px;
background: #303030;
}

.quote-entry blockquote:after {
content:' ';
display: block;
width: 100px;
margin: .5em auto ;
height: 3px;
background: CHANGED;
}

.quote-entry span {
margin-bottom: 3em;
display: block;
}



/*-----------*/
/*PHOTO POSTS*/
/*-----------*/

.photo-entry img {
margin-bottom: 1em;

}


/*-----------*/
/*AUDIO POSTS*/
/*-----------*/ 

.audio-player {
background: #303030;
padding: 1em;
text-align: center;
}

.audio-description {
border: solid #303030 2px;
padding: 1em;
text-transform: uppercase;
font-size: .8em;
margin-bottom: 2em;
}

/*----------*/
/*LINK POSTS*/
/*----------*/ 

.entry-content .link {
padding: 1em;
text-transform: uppercase;
margin-bottom: 2em;
font-weight: bold;
border: solid #303030 2px;
font-family: 'PT Sans';
}

.link-entry .icon {
margin-right: 1em;
overflow: hidden;
}  

.link span {
font-size: .8em;
} 

/*----------*/
/*CHAT POSTS*/
/*----------*/

.chat-entry .icon {
margin-right: 1em;
overflow: hidden;
}

ul.chat {
clear: both;
margin: 0;
list-style-type: none;
}

ul.chat li {
border-bottom: solid #303030 1px;
padding: 1em 0;
}

ul.chat li:last-child {
border-bottom: solid #303030 2px;
}

ul.chat .label {
font-weight: bold;
font-size: .8em;
margin-right: 1em;
text-transform: uppercase;
}

/*TAGS*/ 

.tags {
  color: #bfb9a7;
  font-size: .9em;
  list-style-type: none;
}

.tags li {
  display: inline;
  margin-right: 0.625em;
}


.tags li a:before {
  content: "#";
}


/**********************
FOOTER
**********************/

#footer {
font-size: .7em;
text-transform: uppercase;
margin-bottom: 8em; 
opacity: 0.7;
}

#footer p {
margin-bottom: 1em;
}

#footer a {
color: #2d2a26;
}

#sdg{
border: solid #2d2a26 2px;
padding: 6px;
display: inline-block;
}



/**********************
NON-SEMANTIC HELPER CLASSES (h5bp)
**********************/

/* For image replacement */
.ir { 
display: block; 
border: 0 !important; 
text-indent: -999em; 
overflow: hidden; 
background-color: transparent; 
background-repeat: no-repeat; 
text-align: left; 
direction: ltr; 
*line-height: 0;   
}

.ir br { 
display: none; 
}

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { 
display: none !important; 
visibility: hidden; 
}

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { 
border: 0; 
clip: rect(0 0 0 0); 
height: 1px; 
margin: -1px; 
overflow: hidden; 
padding: 0; 
position: absolute; 
width: 1px; 
}

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { 
clip: auto; 
height: auto; 
margin: 0; 
overflow: visible; 
position: static; 
width: auto; 
}

/* Hide visually and from screenreaders, but maintain layout */
.invisible { 
visibility: hidden; 
}


/**********************
PRINT STYLES (h5bp)
**********************/

@media print {
	* { 
		background: transparent !important; 
		color: black !important; 
		box-shadow:none !important; 
		text-shadow: none !important; 
		filter:none !important; 
		-ms-filter: none !important; 
	} /* Black prints faster: h5bp.com/s */

	a, a:visited { 
	text-decoration: underline; 
	}

	a[href]:after { 
	content: " (" attr(href) ")"; 
	}

	abbr[title]:after { 
	content: " (" attr(title) ")"; 
	}

	.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { 
	content: ""; 
	}  /* Don't show links for images, or javascript/internal links */

	pre, blockquote { 
	border: 1px solid #999; 
	page-break-inside: avoid; 
	}

	thead { 
	display: table-header-group; 
	} /* h5bp.com/t */

	tr, img { 
	page-break-inside: avoid; 
	}

	img { 
	max-width: 100% !important; 
	}

	@page { 
	margin: 0.5cm; 
	}

	p, h2, h3 { 
	orphans: 3; 
	widows: 3; 
	}

	h2, h3 { 
	page-break-after: avoid; 
	}
}


</style>

     
</head>


<body>

	<!--[if lt IE 7]>
	<p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
	<![endif]-->

  <div id="wrapper">
    
    <div id="header"><!--HEADER-->
        <h1 ><a class="ir" href="/" title="Go Home">{Title}</a></h1>
        <p id="intro">{Description}</p> 
        <nav id="main-nav">
            <ul>
              {block:HasPages}{block:Pages}<li><a href="{URL}" title="{Label}">{Label}</a></li>{/block:Pages}{/block:HasPages}
              
            </ul>
            <a href="/random">
			<small>Randomly View A Post</small>
			</a><br />
            <a href="/archive"><small>View All Past Posts</small></a>
            {block:AskEnabled}<br /><small><a href="/ask" title="{AskLabel}">{AskLabel}</a></small>{/block:AskEnabled}
        </nav>                             
    </div>
    
    <!--CONTENT-->
    
    <section id="content">
        
      <div class="clear"></div>
      
      <!--START POSTS-->
      <!--<article> tags for each post are closed at the end of the loop (.entry-footer) to reduce unecessary redundancy of code.-->
	  {block:Posts} 
      
      {block:Text}<!--TEXT-->      
      <article class="entry text-entry">
        <div class="entry-header">{block:Title}<h2>{Title}</h2>{/block:Title}</div>
        <div class="entry-content">
          {Body}
        </div>{/block:Text}    
          
      {block:Photo}<!--PHOTO-->
      <article class="entry photo-entry">
        <div class="entry-content">
          <a href="{PhotoURL-HighRes}" title="{PhotoWidth-HighRes}x{PhotoHeight-HighRes}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
          {block:Caption}{Caption}{/block:Caption}
        </div>{/block:Photo}
      
      {block:Photos}<!--PHOTOS-->
      <article class="entry">
        <div class="entry-content">
          {Photoset-500}
          {block:Caption}{Caption}{/block:Caption}
        </div>  
      </article>{/block:Photos}
      
      {block:Quote}<!--QUOTE-->     
      <article class="entry quote-entry">
        <div class="entry-content">
          <blockquote>{Quote}</blockquote>
          {block:Source}<span>{Source}</span>{/block:Source}
        </div>{/block:Quote}
      
      {block:Link}<!--LINK-->
      <article class="entry link-entry">
        <div class="entry-content">
          <div class="link">
			<div class="icon">
				<svg style="overflow: hidden; position: relative;" height="30" version="1.1" width="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 138 138"><path fill="#303030" stroke="none" d="M16.45,18.085L13.979999999999999,20.556C14.033999999999999,21.579,13.682999999999998,22.618000000000002,12.902,23.402C11.437,24.861,9.065,24.861,7.6,23.400000000000002C6.138999999999999,21.935000000000002,6.14,19.564000000000004,7.598999999999999,18.099000000000004C8.382,17.318000000000005,9.423,16.968000000000004,10.446,17.021000000000004L12.915,14.552000000000005C10.451999999999998,13.495000000000005,7.489999999999999,13.966000000000005,5.476999999999999,15.978000000000005C2.8429999999999995,18.615000000000006,2.8409999999999993,22.885000000000005,5.476999999999999,25.523000000000003C8.114999999999998,28.160000000000004,12.386,28.158,15.021999999999998,25.523000000000003L15.022999999999998,25.525000000000002C17.033,23.511,17.506,20.548,16.45,18.085ZM14.552,12.915L17.019,10.446C16.965999999999998,9.423,17.316,8.384,18.096999999999998,7.598C19.564,6.139,21.934,6.137,23.4,7.6C24.862,9.065,24.862,11.437,23.4,12.901C22.616999999999997,13.684,21.578,14.033,20.554,13.98L18.084999999999997,16.448C20.548,17.505,23.508999999999997,17.032,25.522999999999996,15.024000000000001C28.156999999999996,12.385000000000002,28.155999999999995,8.114,25.522999999999996,5.4780000000000015C22.883999999999997,2.8420000000000014,18.612999999999996,2.8410000000000015,15.977999999999996,5.477000000000001C13.967,7.489,13.495,10.451,14.552,12.915ZM18.152,10.727L10.728000000000002,18.153C10.143,18.737,10.141000000000002,19.688,10.728000000000002,20.273999999999997C11.313000000000002,20.857999999999997,12.264000000000001,20.857999999999997,12.849000000000002,20.272L20.274,12.847999999999999C20.858,12.261999999999999,20.858,11.312999999999999,20.274,10.726999999999999C19.687,10.141,18.736,10.142,18.152,10.727Z" opacity="1" fill-opacity="1" transform="matrix(5.624,0,0,5.624,-18.6694,-18.6732)" stroke-width="0.17780938833570414"></path></svg>
			</div>
			<h2><a href="{URL}">{Name}</a></h2>
            <span>&rarr; {URL}</span>
          </div>
          {block:Description}{Description}{/block:Description}
        </div>{/block:Link}
      
      {block:Chat}<!--CHAT-->
      <article class="entry chat-entry">
        {block:Title}<h2>{Title}</h2>{/block:Title}
        <div class="entry-content">
			<div class="icon">
				<svg style="overflow: hidden; position: relative;" height="40" version="1.1" width="40" xmlns="http://www.w3.org/2000/svg" viewBox="-8 -8 155 155"><path fill="#303030" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999,20.518,7.436999999999999,22.186C6.991,23.665,6.100999999999999,25.303,4.380999999999999,26.752C4.380999999999999,26.752,8.395999999999999,26.485999999999997,11.232,23.608999999999998C11.395,23.648999999999997,11.564,23.679,11.729,23.715999999999998C11.574,23.253999999999998,11.482999999999999,22.772999999999996,11.482999999999999,22.272999999999996C11.482999999999999,18.879999999999995,15.258999999999999,16.222999999999995,20.082,16.222999999999995C23.546,16.222999999999995,26.461,17.598999999999997,27.833000000000002,19.628999999999994C29.001,18.288999999999994,29.680000000000003,16.736999999999995,29.680000000000003,15.076999999999995C29.68,10.049,23.548,5.972,15.985,5.972ZM27.68,22.274C27.68,19.484,24.279,17.221,20.081,17.221C15.885,17.221,12.482,19.484,12.482,22.274C12.482,25.065,15.885,27.327,20.081,27.327C21.009999999999998,27.327,21.895,27.211000000000002,22.718,27.008000000000003C24.291,28.605000000000004,26.519,28.752000000000002,26.519,28.752000000000002C25.564999999999998,27.948000000000004,25.072,27.039,24.823999999999998,26.218000000000004C26.562,25.293,27.68,23.871,27.68,22.274Z" opacity="1" fill-opacity="1" transform="matrix(5.624,0,0,5.624,-20.9146,-27.2819)" stroke-width="0.17780938833570414"></path></svg>
			</div>
			<ul class="chat">
				{block:Lines}<li class="{Alt} user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}
			</ul>
        </div>{/block:Chat}
      
      {block:Video}<!--VIDEO-->
      <article class="entry video-entry">
        <div class="entry-content">
          {Video-500}
          {block:Caption}{Caption}{/block:Caption}
        </div>{/block:Video}     
      
      {block:Audio}<!--AUDIO-->
      <article class="entry audio-entry">
        <div class="entry-content">
          <div class="audio-player">{AudioPlayerBlack}</div>
		  <div class="audio-description">
			{block:TrackName}<a href="{ExternalAudioURL}" title="Download this song"><strong>{TrackName}</strong></a>{/block:TrackName}
            {block:Artist}<br /><strong>{Artist}</strong>{/block:Artist}
            {block:Album}<br /><em>{Album}</em>{/block:Album}
		  </div>
          {block:Caption}{Caption}{/block:Caption}
        </div>{/block:Audio}
      
        <!--ENTRY FOOTER-->{block:Date}
        <!--Hide section from static pages-->
        
        <footer class="entry-footer"> 
          <p>
		  <a href="https://plus.google.com/109157205728499190387?rel=author" class="author">By Timothy Diokno</a>		  
          <a href="{Permalink}" title="Permalink to this post."><strong><time datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}">{Month} {DayOfMonth}, {Year}</time></strong></a>&nbsp;
          {block:ContentSource}Reblogged from <a href="{SourceURL}" title="{SourceTitle}"><strong>{SourceTitle}</strong></a>.</span>{/block:ContentSource}
          </p>          
        </footer>{/block:Date}
      </article>
	  {/block:Posts}<!--END POSTS-->
        
        <!--FOOTER-->
        <footer id="footer">
           <p>&copy; {CopyrightYears}, <strong>{Title}</strong>. All Rights Reserved.
           <br/>Site handcrafted in Quezon City, PH by <strong><a href="http://timmystream.tumblr.com/">Timothy Diokno</a></strong>.<br/>
		   Dowload and contribute to this theme's source code on <a href="http://timmystream.googlecode.com/">Google Code</a></strong>.
		   </p>
           <p><span id="sdg"><strong>Soli Deo Gloria</strong></span></p>
        </footer>
        
    </section> <!--end #content-->
    
  </div><!--#wrapper--> 

  <!--jQUERY (GOOGLE CDN)-->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  
  <!--GOOGLE ANALYTICS-->
  <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-31210109-1']);
    _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>

</body>
</html>